<template>
	<view class="index-page page">
		<swiper :indicator-dots="false" class="top-banner" :autoplay="true">
			<swiper-item v-for="item in banner" :key="item.id">
				<image class="banner-item" :src="item.url"></image>
			</swiper-item>
		</swiper>
		<CustomNav :isBack="false" color="#fff" :topBgColor="topBgColor" title="肃州有礼"></CustomNav>
		<view class="content-block">
			<view class="menu-block">
				<view class="menu-col">
					<view @click="navigate('/page_pack/motion_video/index')" class="menu-item full">
						<image :src="cloudStorage+'index/menu-bg-1.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/menu-icon-1.png'" class="menu-icon"></image>大美肃州
						</view>
					</view>
				</view>
				<view class="menu-col">
					<view @click="navigate('/page_pack/special/enter')" class="menu-item" style="margin-bottom: 30rpx;">
						<image :src="cloudStorage+'index/menu-bg-4.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/menu-icon-4.png'" class="menu-icon"></image>戈壁盛产
						</view>
					</view>
					<view @click="navigate('/page_pack/food/list')" class="menu-item">
						<image :src="cloudStorage+'index/menu-bg-2.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/menu-icon-2.png'" class="menu-icon"></image>美食乡村
						</view>
					</view>
				</view>
				<view class="menu-col">
					<view @click="navigate('/page_pack/entrepreneurship/enter')" class="menu-item"
						style="margin-bottom: 30rpx;">
						<image :src="cloudStorage+'index/menu-bg-3.png'" class="menu-bg"></image>-
						<view class="menu-name">
							<image :src="cloudStorage+'index/menu-icon-3.png'" class="menu-icon"></image>创业蓝海
						</view>
					</view>
					<view @click="navigate('/page_pack/landscape/list')" class="menu-item">
						<image :src="cloudStorage+'index/menu-bg-5.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/menu-icon-5.png'" class="menu-icon"></image>农村嗨玩
						</view>
					</view>
				</view>
			</view>
			<view class="menu-block">
				<view class="menu-col">
					<view @click="navigate('/page_pack/seed/seed')" class="menu-item">
						<image :src="cloudStorage+'index/menu-seed.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/seed-icon.png'" class="menu-icon"></image>肃州种子
						</view>
					</view>
				</view>
				<view class="menu-col right">
					<view @click="navigate('')" class="menu-item">
						<image :src="cloudStorage+'index/live-room.png'" class="menu-bg"></image>
						<view class="menu-name">
							<image :src="cloudStorage+'index/live-icon.png'" class="menu-icon"></image>肃州优选直播间
						</view>
					</view>
				</view>
			</view>
			<!-- <image class="live-enter" :src="cloudStorage+'index/live.png'"></image> -->
			<view class="list-block">
				<image :src="cloudStorage+'index/home-list-bg.jpg'" mode="aspectFill" class="list-bg"></image>
				<view class="list-tab">
					<view @click="tabActive=1" :class="tabActive==1?'active':''" class="tab-item FZHZGBJ">美食</view>
					<view @click="tabActive=2" :class="tabActive==2?'active':''" class="tab-item FZHZGBJ">好物</view>
					<view @click="tabActive=3" :class="tabActive==3?'active':''" class="tab-item FZHZGBJ">佳景</view>
					<view class="more">更多></view>
				</view>
				<view class="list">
					<template v-if="tabActive==1">
						<FoodItem :info="item" v-for="item in list" :key="item.id"></FoodItem>
					</template>
					<template v-else-if="tabActive==2">
						<GoodsItem :info="item" v-for="item in list" :key="item.id"></GoodsItem>
					</template>
					<template v-else-if="tabActive==3">
						<ViewItem :info="item" v-for="item in list" :key="item.id"></ViewItem>
					</template>
					<view v-if="list.length==0" class="empty">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import FoodItem from '@/components/ListItem/FoodItem'
	import GoodsItem from '@/components/ListItem/GoodsItem'
	import ViewItem from '@/components/ListItem/ViewItem'
	import {
		marketList
	} from '@/api/market';
	import {
		viewList
	} from '@/api/view';
	import {
		foodList
	} from '@/api/food';
	import {
		indexBanner
	} from '@/api/index'
	import {
		videoList
	} from '@/api/video'
	export default {
		components: {
			FoodItem,
			GoodsItem,
			ViewItem
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				banner: [],
				viewBanner: [

				],
				video: [],
				videoIndex: 0,
				videoContext: null,

				tabActive: 1,
				func: foodList,
				list: [

				]
			}
		},
		watch: {
			tabActive: {
				immediate: true,
				handler(val) {
					switch (val) {
						case 1:
							this.func = foodList;
							break;
						case 2:
							this.func = marketList;
							break;
						case 3:
							this.func = viewList;
					}
					this.getList();
				}
			}
		},
		methods: {
			//onShareAppMessage 分享给朋友
			//onShareTimeline  分享到朋友圈
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					path: '/pages/index/index'
				}
			},
			// #endif
			onShareTimeline(res) {
				let distSource = uni.getStorageSync('distSource');
				if (distSource) {
					return {
						//title: this.list.jobTitle,
						path: '/pages/index/index',
						type: 0,
						query: 'id=' + distSource,
					}
				}
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.list = [];
				this.func({
					page: 1,
					limit: 3
				}).then(res => {
					this.list = res.list;
				})
			},
			getBanner() {
				indexBanner().then(res => {
					this.banner = res.list.filter(item => item.type == 1);
					this.viewBanner = res.list.filter(item => item.type == 2);
				})
			},
			getVideo() {
				videoList({
					page: 1,
					limit: 10,
					videoType: 1,
					keyword: ''
				}).then(res => {
					this.video = res.list;
				})
			},
			changeVideo() {
				if (this.videoIndex == this.video.length - 1) {
					this.videoIndex = 0;
				} else {
					this.videoIndex++;
				}
			}
		},
		onLoad() {
			this.getBanner()
			this.getVideo()
		}
	}
</script>

<style lang="scss">
	.index-page {
		overflow: hidden;
		height: 100%;

		.top-banner {
			width: 100%;
			height: 500rpx;

			.banner-item {
				width: 100%;
				height: 100%;
			}
		}

		.content-block {
			position: relative;
			margin-top: -30rpx;
			width: 100%;
			border-radius: 10px 10px 0 0;
			background: #fff;
			padding: 30rpx;

			.menu-block {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.menu-col {
					width: calc((100%/3) - 20rpx);

					.menu-item {
						border-radius: 10px;
						width: 100%;
						height: 190rpx;
						position: relative;
						overflow: hidden;

						.menu-bg {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}

						.menu-name {
							color: #fff;
							position: absolute;
							transform: translate(50%, -50%);
							right: 50%;
							top: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							text-shadow: 0 0 20px #000;

							.menu-icon {
								margin-right: 16rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.menu-item.full {
						height: 410rpx;
						margin-bottom: 20rpx;
					}
				}

				.menu-col.right {
					width: calc((100% - 12rpx)/3 * 2);
				}
			}

			.live-enter {
				width: 100%;
				height: 180rpx;
				margin: 30rpx auto;
			}

			.list-block {
				width: 100%;
				border-radius: 8px;
				overflow: hidden;
				padding: 30rpx 20rpx 0 20rpx;
				position: relative;
				z-index: 1;
				margin-top: 30rpx;

				.list-bg {
					width: 100%;
					height: 100%;
					position: absolute;
					opacity: 0.1;
					z-index: 0;
					left: 0;
					top: 0;
				}

				.list-tab {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.tab-item {
						margin-right: 40rpx;
						color: #AAAAAA;
					}

					.tab-item.active {
						color: #64B548;
					}

					.more {
						font-size: 28rpx;
						color: #767676;
						position: absolute;
						transform: translate(0, -50%);
						right: 0;
						top: 50%;
					}
				}

				.list {
					margin-top: 20rpx;
					position: relative;
					z-index: 1;
				}
			}
		}
	}
</style>